<script lang="ts">
import { defineComponent, ref, toRaw } from "vue";
import { delayTask } from "@/utils/timer";

import PopupBottom from "@/components/popup/bottom.vue";
import TagItem from "./tag-item.vue";
import FormButton from "@/components/form/button.vue";

export default defineComponent({
  components: { PopupBottom, TagItem, FormButton },
  setup() {
    const tempData = { listData: [] as any[], index: 0, childIndex: 0 };
    let pickerCallback: ((pickerList: any[]) => void) | undefined = undefined;

    const visible = ref(false);

    const pickerList = ref<any[]>([]);
    const pickerClick = (index: number) => {
      if (index === -2) {
        pickerCallback?.(toRaw(pickerList.value));
        visible.value = false;
        delayTask(200, () => {
          pickerList.value = [];
          listData.value = [];
          childList.value = [];
        });
      } else if (index === -1) {
        const child = toRaw(childList.value)[tempData.childIndex];
        const _index = pickerList.value.findIndex((i) => i.id === child.id);
        _index === -1 && pickerList.value.push(child);
      } else {
        pickerList.value.splice(index, 1);
      }
    };

    const listData = ref<any[]>([]);
    const childList = ref<any[]>([]);

    const pickerChange = (e: MiniApp.Event<{ value: number[] }>) => {
      const [index, childIndex] = e.detail.value;
      if (index === tempData.index) {
        tempData.childIndex = childIndex;
      } else {
        // 省份改变
        childList.value = tempData.listData[index].list;
        tempData.index = index;
      }
    };

    const show = (
      option: { pickerList: any[]; listData: any[] },
      callback: (pickerList: any[]) => void
    ) => {
      pickerList.value = option.pickerList;
      listData.value = option.listData;
      childList.value = option.listData[0].list;
      visible.value = true;
      tempData.listData = option.listData;
      pickerCallback = callback;
    };

    return {
      visible,
      pickerList,
      pickerClick,
      listData,
      childList,
      pickerChange,
      show,
    };
  },
});
</script>

<template>
  <PopupBottom v-model="visible" title="选择地区" :showClose="false">
    <view class="multiple-picker">
      <view class="multiple-picker-cancel" @click="visible = false">取消</view>
      <view class="multiple-picker-confirm" @click="pickerClick(-2)">确定</view>
      <view class="multiple-picker-select">
        <view style="display: flex; align-items: center; flex-shrink: 0">
          <view class="multiple-picker-label">已选</view>
          <view class="multiple-picker-label2">(可多选)</view>
          <view class="multiple-picker-label">：</view>
        </view>
        <view
          style="display: flex; flex-wrap: wrap; flex-grow: 1; min-width: 0"
        >
          <view
            class="multiple-picker-tag"
            v-for="(i, d) of pickerList"
            :key="i.id"
          >
            <TagItem
              :text="i.name"
              isActive
              showClose
              @close-click="pickerClick(d)"
            />
          </view>
        </view>
      </view>
      <view class="multiple-picker-line"></view>
      <picker-view class="multiple-picker-wrapper" @change="pickerChange">
        <picker-view-column>
          <view class="multiple-picker-item" v-for="i of listData" :key="i.id">
            {{ i.name }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="multiple-picker-item" v-for="i of childList" :key="i.id">
            {{ i.name }}
          </view>
        </picker-view-column>
      </picker-view>
      <view class="multiple-picker-add">
        <view @click="pickerClick(-1)">
          <FormButton>确定增加</FormButton>
        </view>
      </view>
    </view>
  </PopupBottom>
</template>

<style lang="scss">
.multiple-picker {
  padding-top: 30rpx;

  .multiple-picker-cancel,
  .multiple-picker-confirm {
    position: absolute;
    top: 48rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.6);
    line-height: 48rpx;
  }

  .multiple-picker-cancel {
    left: 30rpx;
  }

  .multiple-picker-confirm {
    right: 30rpx;
    color: #ff7900;
  }

  .multiple-picker-select {
    display: flex;
    align-items: flex-start;
    padding-left: 30rpx;
    padding-bottom: 20rpx;
  }

  .multiple-picker-label {
    font-size: 32rpx;
    color: #333333;
    line-height: 48rpx;
    font-weight: bold;
  }

  .multiple-picker-label2 {
    padding: 0 10rpx;
    font-size: 24rpx;
    color: #666666;
  }

  .multiple-picker-tag {
    margin-right: 20rpx;
    margin-bottom: 10rpx;
  }

  .multiple-picker-line {
    border-bottom: 2rpx solid #e7e7e7;
  }

  .multiple-picker-wrapper {
    height: 400rpx;
  }

  .multiple-picker-item {
    line-height: 34px;
    text-align: center;
  }

  .multiple-picker-add {
    height: 106rpx;
    padding: 14rpx 60rpx 0;
  }
}
</style>